<template>
    <el-form
        :model="localFormData"
        label-width="80px"
        :inline="true"
        class="seriesform"
        ref="extendsRef"
        :rules="rules"
    >
        <el-form-item label="子集名称" prop="name">
            <el-input v-model="localFormData.name" placeholder="请输入子集名称"></el-input>
        </el-form-item>
        <el-form-item label="音频" class="dpformitem videoformitem">
            <el-tag
                v-for="tag in localFormData.selectVideos"
                :key="tag"
                class="mx-1 tagvideoname txtclamp"
                closable
                :disable-transitions="false"
                @close="handleTagClose(tag)"
            >
                {{ tag.name }}
            </el-tag>
            <el-button type="primary" class="button-new-tag ml-1" size="small" @click="handleVideoList">
                选择音频
            </el-button>
        </el-form-item>
        <media-thumb :formData="localFormData" />
        <el-form-item prop="cpid" label="内容提供方">
            <el-select v-model="localFormData.cpid" placeholder="请选择内容提供方"
                @change="handleCpChange" clearable
                @clear="handleClear('cp')" :disabled="cpidDisabled">
                <el-option v-for="item in mediaCpList" :key="item.cpid" :label="item.name" :value="item.cpid">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="来源ID" prop="sourceid">
            <el-input v-model="localFormData.sourceid" placeholder="请输入来源ID" :disabled="sourceidDisabled"></el-input>
        </el-form-item>
        <el-form-item label="付费类型" prop="paytype">
            <el-switch
                v-model="localFormData.paytype"
                active-color="#ff4949"
                inactive-color="#13ce66"
                :active-value="1"
                :inactive-value="0"
                active-text="付"
                inactive-text="免"
                inline-prompt
                :disabled="paytypeReadonly"
            />
        </el-form-item>
        <el-form-item prop="abstract" label="子集简介" class="txtareabox">
            <el-input
                v-model="localFormData.abstract"
                maxlength="255"
                show-word-limit
                type="textarea"
                placeholder="请输入子集简介"
            ></el-input>
        </el-form-item>
        <el-form-item prop="content" label="子集详情" class="txtareabox">
            <el-input
                v-model="localFormData.content"
                type="textarea"
                placeholder="请输入子集详情"
            ></el-input>
        </el-form-item>
    </el-form>
    <rel-video-medium
        ref="selectVideoRef"
        :dialogRelVideoVisible="selectVideoDialog"
        :dialogRelVideoTitle="selectVideoTitle"
        :dialogRelVideoFormData="selectVideoFormData"
        :filetype="'audio'"
        :videotype="'vod'"
        dialogRelAction="createseries"
        dialogSelectType="radio"
        @handleCancelVideoDialog="selectVideoCancelDialog"
        @reloadMediaData="selectVideoComplete"
    />
</template>

<script>
    import {  ref, toRef, reactive, nextTick, computed } from 'vue'
    import { getCps } from "@/api/cp"
    import MediaThumb from '@/views/media/media/components/EditExtends/MediaThumb'
    import RelVideoMedium from '../../../media/components/Medium/RelVideoMedium'
    export default {
        name: "",
        components: {
            MediaThumb,
            RelVideoMedium
        },
        props: {
            formData: {
                type: Object
            },
            toChildData: {
                type: Object
            }
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')
            localFormData.value.paytype = 0
            const extendsRef = ref('')

            const rules = reactive({
                name: { required: true, message: '请输入子集名称', trigger: 'blur' },
            })

            // 内容提供方
            const cpidDisabled = ref(false)
            const sourceidDisabled = ref(true)
            const mediaCpList = ref([])
            getCps({ pagesize: 1000 }).then(response => {
                if (response.errcode == 0) {
                    mediaCpList.value = response.data.list
                } else {
                    console.log(response)
                }
            })
            const handleCpChange = () => {
                localFormData.value.sourceid = ''
                sourceidDisabled.value = false
            }
            const handleClear = (clearname) => {
                switch (clearname) {
                    case 'cp':
                        sourceidDisabled.value = true
                        localFormData.value.sourceid = ''
                        break
                }
            }

            // 视频弹窗
            const handleVideoList = () => {
                selectVideoDialog.value = true
                nextTick(() => {
                    selectVideoRef.value.init()
                })
            }
            const handleTagClose = (tag) => {
                localFormData.value.selectVideos.splice(localFormData.value.selectVideos.indexOf(tag), 1)
                localFormData.value.videoids.splice(localFormData.value.videoids.indexOf(tag.videoid), 1)
                // console.log(localFormData.value.gaskets)
            }
            const selectVideoRef = ref(null)
            const selectVideoDialog = ref(false)
            const selectVideoTitle = ref('选择音频')
            const selectVideoFormData = reactive({
                datas: []
            })
            const selectVideoCancelDialog = () => {
                selectVideoDialog.value = false
            }
            const selectVideoComplete = (data) => {
                // console.log(data)
                if (data && data.length > 0) {
                    localFormData.value.selectVideos = []
                    localFormData.value.videoids = []
                    data.forEach((val) => {
                        if (val.errcode == 0) {
                            localFormData.value.selectVideos.push({ videoid: val.data.videoid, name: val.data.name, type: 'success' })
                            localFormData.value.videoids.push(val.data.videoid)
                        }
                    })

                }
                // Object.assign(localFormData.value.thumb,)
            }

            // 封面
            localFormData.value.thumb = []

            const localChildData = toRef(props, 'toChildData')
            const paytypeReadonly = computed(() => localChildData.value.paytype == 0 ? true : false)
            return {
                localFormData,
                extendsRef,
                rules,
                cpidDisabled,
                sourceidDisabled,
                mediaCpList,
                handleCpChange,
                handleClear,
                handleVideoList,
                handleTagClose,
                selectVideoRef,
                selectVideoDialog,
                selectVideoTitle,
                selectVideoFormData,
                selectVideoCancelDialog,
                selectVideoComplete,
                paytypeReadonly,
            }
        }
    }
</script>

<style lang="scss">
    .dpformitem{
        .el-form-item__content{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .el-tag.tagvideoname .el-icon{
                position:absolute;
                top:10px;
                right: 8px;
            }
        }
    }
</style>
<style scoped lang="scss">
    .videoformitem{
        display: flex;
        .el-form-item__content{
            display: block;
            .tagvideoname{
                display: block;
                margin-bottom: 8px;
                width:100%;
                height: 36px;
                line-height: 35px;
                padding-right: 20px;
            }
        }
    }
</style>